Flexbox是CSS的一種佈局模型，旨在讓元素在容器中按照靈活的方式排列。它能夠自動調整子元素的大小和位置，從而實現更加靈活、響應式的佈局。
Flexbox的基本概念

1. 容器（Container）：Flexbox的父級元素，被稱為「flex容器」。

2. 項目（Items）：位於flex容器內的子元素，稱為「flex項目」。
   要使用Flexbox，首先需要將容器的 display 屬性設置為 flex。所有的子元素就會成為flex項目。
   主要屬性
   1.flex-direction
   這個屬性用來定義主軸的方向，即項目在容器中的排列方向。
   • row（預設值）：水平從左到右排列。
   • row-reverse：水平從右到左排列。
   • column：垂直從上到下排列。
   • column-reverse：垂直從下到上排列。
   2.justify-content
   用來定義項目沿著主軸（橫向或縱向）的對齊方式。
   • flex-start：項目靠起始端排列。
   • flex-end：項目靠終點排列。
   • center：項目居中排列。
   • space-between：項目之間平均分布，第一個和最後一個項目靠邊。
   • space-around：項目之間有相等的間距。
   3.align-items
   用來定義項目沿著交叉軸（主軸的垂直方向）的對齊方式。
   • flex-start：項目靠交叉軸的起點對齊。
   • flex-end：項目靠交叉軸的終點對齊。
   • center：項目在交叉軸上居中對齊。
   • stretch（預設值）：項目被拉伸以填滿容器。

3. flex-wrap
   當項目過多而無法在單行顯示時，是否允許它們換行。
   • nowrap（預設值）：所有項目都在同一行。
   • wrap：項目會換行顯示。
   • wrap-reverse：項目會換行，順序反轉。
   子項目屬性

4. flex-grow
   定義項目的放大比例。如果所有項目的 flex-grow 都設為 1，它們將平均分配容器中的剩餘空間。

5. flex-shrink
   定義項目的縮小比例。如果空間不足，設置了flex-shrink的項目會縮小。
   3.flex-basis
   定義項目的初始大小，與寬度或高度類似，但它的值會受flex-grow和flex-shrink的影響。
   4.align-self
   允許單個項目在交叉軸上有不同的對齊方式，覆蓋align-items設置。

• flex-start、flex-end、center、baseline、stretch